<template>
  <cu-layout :navProp="{ placeholder: true, bgColor: 'rgba(255,255,255)', title: '退租问卷' }" :bgStyle="{ bgColor: 'rgb(255,255,0)' }">
    <view :class="[`${prefixCls}-questionnaire-container`]">
      <view class="title">您退租的主要原因是？</view>
      <view class="tag-wrap">
        <view :class="['tag-item', item.select ? 'active-item' : '']" v-for="(item, index) in tag" :key="index" @click="handleActive(item)">{{ item.name }}</view>
      </view>
      <view class="title" v-html="content"></view>
      <view class="rate-eval">
        <view class="recommend">
          <view class="left-text">{{ leftTitle }}</view>
          <view class="right-text">{{ rightTitle }}</view>
        </view>
        <view class="rate">
          <view
            :class="[
              'rate-style',
              {
                'test-3': index + 1 <= recommend && index <= 2,
                'test-5': index + 1 <= recommend && recommend > 2 && index <= 6,
                'test-8': index + 1 <= recommend && recommend > 6 && index <= 8,
                'test-10': index + 1 <= recommend && recommend > 8 && index <= 9,
              },
            ]"
            v-for="(item, index) in 10"
            :key="index"
            @click="handleRate(item)"
          >
            {{ index + 1 }}
          </view>
        </view>
      </view>
      <template v-if="reasonTag.length">
        <view class="title">推荐/不推荐的理由</view>
        <view class="tag-wrap">
          <view :class="['tag-item', item.select ? 'active-item' : '']" v-for="(item, index) in reasonTag" :key="index" @click="handleActive(item)">{{ item.name }}</view>
        </view>
        <view class="container" @click="handleShowDetail">我有话说></view>
        <uv-textarea v-if="showDetail" v-model="detail" count maxlength="100" placeholder="我们会虚心接受您的建议，做到更好~"></uv-textarea>
      </template>
      <view class="button-container">
        <uv-button :disabled="!isSubmit" type="primary" @click="handleSubmit()" text="提交"></uv-button>
        <uv-safe-bottom></uv-safe-bottom>
      </view>
    </view>
  </cu-layout>
</template>

<script>
import { mapActions, mapGetters } from 'vuex'
import { getNps, postNps } from '../api'
export default {
  name: 'questionnaire',
  components: {},
  mixins: [],
  props: {},
  data() {
    return {
      recommend: 0,
      content: '',
      leftTitle: '',
      rightTitle: '',
      tag: [],
      newlabel: [],
      reasonTag: [],
      detail: '',
      showDetail: false,
    }
  },
  // 侦听属性
  watch: {},
  // 计算属性
  computed: {
    ...mapGetters([]),
    isSubmit() {
      return this.recommend != 0 && this.tag.some((v) => v.select == true)
    },
  },
  // 监听页面加载，该钩子被调用时data,computed,function,watch,props,slots已设置完成
  onLoad(options) {
    this.getData()
  },
  // 监听页面显示，页面每次出现在屏幕上都触发
  onShow() {},
  // 监听页面初次渲染完成，此时组件已挂载完成
  onReady() {},
  // 下拉刷新
  onPullDownRefresh() {},
  // 加载更多
  onReachBottom() {},

  created() {},
  mounted() {},
  destroyed() {},
  methods: {
    ...mapActions([]),
    async getData() {
      const { id } = this.$Route.query
      const { data } = await getNps({ id, type: 1, is_from_wx: 1 })
      this.tag = data.checkout_cause.map((v) => {
        return { name: v, select: false }
      })
      this.content = data.content
      this.leftTitle = data.left
      this.rightTitle = data.right
      this.newlabel = data.newlabel
    },
    handleRate(value) {
      this.recommend = value
      if (value < 6) {
        this.reasonTag = this.newlabel.level1
      } else if (value > 6 && value <= 8) {
        this.reasonTag = this.newlabel.level2
      } else {
        this.reasonTag = this.newlabel.level3
      }
    },
    async handleSubmit() {
      const { id } = this.$Route.query
      const { detail, recommend: score, reasonTag, tag } = this
      const label_id = reasonTag
        .filter((v) => {
          return v.select
        })
        .map((item) => {
          return item.id
        })
      const checkout_cause = tag
        .filter((v) => {
          return v.select
        })
        .map((item) => {
          return item.name
        })
      const { data, errcode } = await postNps({ is_new: 1, type: 1, id, score, detail, label_id, checkout_cause })
      if (errcode === 0) {
        this.$ROUTE.go('/pages/subpackage/evaluate/index')
      }
    },
    handleShowDetail() {
      this.showDetail = true
    },
    handleActive(item) {
      item.select = !item.select
    },
  },
}
</script>

<style lang="scss" scoped>
page {
  background: white !important;
}
.#{prefixCls('questionnaire-container')} {
  .title {
    text-align: center;
    font-size: 16px;
    font-weight: bold;
    margin: 20px auto;
  }
  position: relative;
  padding: 15px 15px 100px;
  box-sizing: border-box;
  overflow: hidden;
  .tag-wrap {
    display: flex;
    flex-wrap: wrap;
    .tag-item {
      width: 100px;
      color: black;
      border: 1px solid black;
      text-align: center;
      font-size: 12px;
      border-radius: 8rpx;
      margin-left: 19px;
      margin-bottom: 10px;
      padding: 7px 0;
      &:nth-child(3n + 1) {
        margin-left: 0;
      }
    }
    .active-item {
      background: $uv-primary;
      color: white;
      border-color: white;
    }
  }
  .rate-eval {
    text-align: center;
    .text {
      margin: 10px 0 10px;
      font-size: 18px;
    }
    .recommend {
      margin: 0px 0 10px;
      display: flex;
      justify-content: space-between;
      color: #cccccc;
    }
    .rate {
      display: flex;
      justify-content: space-evenly;
      .rate-style {
        width: 20px;
        background: #d7d7d7;
        color: black;
        padding: 5px;
      }
      .test-3 {
        background: #ff3a51;
        color: white;
      }
      .test-5 {
        background: #179991;
        color: white;
      }
      .test-8 {
        background: #ffd217;
        color: white;
      }
      .test-10 {
        background: #3ee7a2;
        color: white;
      }
      // .active {
      //   background: #f59a23;
      //   color: white;
      // }
    }
  }
  .container {
    text-align: center;
    margin: 15px 0;
    color: $uv-primary;
    font-weight: bold;
    font-size: 12px;
  }
  .button-container {
    width: 100%;
    box-sizing: border-box;
    background: white;
    bottom: 0;
    position: fixed;
    left: 0;
    padding: 10px 15px;
  }
}
</style>
